<template>
  <div class="app-menu-list">
    <ul>
      <li v-for="menuGroup in menus" :key="menuGroup.name">
        <div class="app-menu-group-name">
          <span>{{ menuGroup.name }}</span>
        </div>
        <div class="app-menu-item-list">
          <div
            v-for="menu in menuGroup.children"
            :key="menu.title"
            @click="handleClickMenu(menu)"
            :class="{'app-menu-active': currentPath === menu.page, 'app-menu-item': true}">
            <span>{{ menu.name }}</span>
            <span class="app-menu-item-tip">{{ menu.title }}</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script lang="ts">
import { injectAppNavigator } from "../navigator/app-navigator";
import { AppMenu, MENUS } from "./menus";

export default {
  name: "app-menu",
  // props: {
  //   currentPath: { type: String },
  // },
  setup() {
    const navigator = injectAppNavigator();

    return {
      menus: MENUS,
      currentPath: navigator.state.route.path,
      handleClickMenu(menu: AppMenu) {
        navigator.methods.go(menu.page);
      },
    };
  },
};
</script>

<style lang="scss">
.app-menu-list {
  padding-bottom: 24px;
  ul {
    margin: 0;
    padding: 0;
    li {
      list-style: none;
    }
  }

  .app-menu-group-name {
    font-size: 14px;
    font-weight: 700;
    color: #12b4a5;
    letter-spacing: 1px;
    padding-top: 24px;
    padding-left: 24px;
  }
  .app-menu-item-list {
    padding: 16px 0;
    .app-menu-item {
      padding: 8px 34px;
      color: #3f536e;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.5;
      cursor: pointer;
      transition: all .3s linear;
      &:hover {
        background-color: #f8f9ff;
      }
      &.app-menu-active {
        background: linear-gradient(45deg,rgba(254,172,94,.25),rgba(199,121,208,.25),rgba(75,192,200,.25));
      }
      .app-menu-item-tip {
        margin-left: 1em;
        font-size: 12px;
        color: #b6b6b6;
      }
    }
  }
}
</style>
